import React, { Component } from 'react'
import { Pagination, Button, Table, Tag, Space } from 'antd';
import { getPageList } from '@/utils/api/api'
import MyPage from '@/components/basePage'
import MyModal from '@/components/baseModal'
import BaseForm from '@/components/baseForm'
import { connect } from 'react-redux'
import { ShowModalAction } from '@/store/actionCreator'

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

class MyTable extends Component {
  state = {
    tableList: [],
    total: 0,
    columns: [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        render: text => <a>{text}</a>,
      },
      {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
      },
      {
        title: '作者',
        dataIndex: 'author',
        key: 'author',
      },
      {
        title: '身份',
        key: 'userid',
        dataIndex: 'userid',
        render: userid => (
          <>
            {
              userid === 1 ? <Tag color={'blue'}>管理员</Tag> : <Tag color={'red'}>管理员</Tag>
            }
          </>
        ),
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <Space size="middle">
            <a onClick={() => this.handleEdit(record)}>编辑 </a>
            <a onClick={() => this.handleDelete(record)}>删除</a>
          </Space>
        ),
      },
    ],
    pageSize: 5
  }

  handleEdit(row) {
    console.log(row, 'row')
  }
  handleDelete(row) {
    console.log(row, 'row')
  }

  render() {
    const { isModal, showModalFn } = this.props;
    const { total, tableList, columns, pageSize } = this.state;
    return (
      <div>
        <Button onClick={() => {
          showModalFn(true)
        }}>添加数据</Button>
        <MyModal
          isModal={isModal}
        ></MyModal>

        <Table
          // rowKey={"id"}
          pagination={false}
          columns={columns}
          dataSource={tableList} />

        <MyPage
          pageSize={pageSize}
          total={total}
          onChange={(val) => this.onChange(val)}
        ></MyPage>
      </div>
    )
  }

  componentDidMount() {
    this.getPageData({})
  }

  async getPageData({ page = 0, size = 5 }) {
    let data = await getPageList({ page, size })
    data.data.forEach((item, index) => {
      item.key = item.id
    })
    this.setState({
      tableList: data.data,
      total: data.total
    })
  }

  async onChange(val) {
    this.getPageData({ page: val - 1 })
  }

}

const mapState = (state) => {
  console.log(state, 'state')
  return {
    isModal: state.isModal
  }
}
const mapAction = (diapatch) => {
  return {
    showModalFn(val) {
      const action = ShowModalAction(val)
      diapatch(action)
    }
  }
}


export default connect(mapState, mapAction)(MyTable)